<template>
  <div class="salary">
    <div class="salary_top">
      <div class="title"> {{ time }}(日度)薪酬明细组合图 </div>
      <lineBarChart ref="salaryChart" id="salaryChart" width="100%" height="100%"></lineBarChart>
    </div>
    <div class="salary_bottom">
      <tableBox :data="tableData" :show-serial-number="false" :showThead="true" :thead-list="tableThead"
        @toProjectDetails="toProjectDetails">
      </tableBox>
    </div>
  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import lineBarChart from "../components/lineBarChart.vue"
import { getMonthSalary, getMonthSalaryDetailsByProject } from "@/api/bi/HRAndContract";

export default {
  components: { lineBarChart, tableBox },
  data() {
    return {
      load: null,
      time: null,
      tableData: [],
      tableThead: ['区域', '项目名称', '基数', '计划', '应付金额', '基本工资', '绩效津贴', '加班工资', '福利津贴', '奖惩金额', '保险金额', '工服金额', '工作计划', '培训费用', '招聘费用', '合计薪酬', '基数差异', '计划差异']
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getMonthSalaryChart()
    this.getSalaryDetail()
    let date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
  },
  methods: {
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    async getSalaryDetail() {
      const { data: res } = await getMonthSalaryDetailsByProject();
      let arr = []
      res.forEach((item, index) => {
        let wagesPayable = item.basicSalary + item.performanceAllowance + item.overTimeSalary + item.benefitAllowance + item.rewardsMoney + item.insuranceMoney + item.clothesMoney + item.workPlanMoney + item.trainingCost + item.hireCost
        arr.push([{ val: item.projectRegion }, { val: item.projectName, click: 'toProjectDetails', key: item.projectId, style: "cursor: pointer;color:#409EFF" }, { val: this.formatPrice(item.rv) }, { val: this.formatPrice(item.pv) }, { val: this.formatPrice(wagesPayable) },
        { val: this.formatPrice(item.basicSalary) },
        { val: this.formatPrice(item.performanceAllowance) },
        { val: this.formatPrice(item.overTimeSalary) },
        { val: this.formatPrice(item.benefitAllowance) },
        { val: this.formatPrice(item.rewardsMoney) },
        { val: this.formatPrice(item.insuranceMoney) },
        { val: this.formatPrice(item.clothesMoney) },
        { val: this.formatPrice(item.workPlanMoney) },
        { val: this.formatPrice(item.trainingCost) },
        { val: this.formatPrice(item.hireCost) },
        { val: this.formatPrice(item.sumSalary) },
        { val: this.formatPrice(item.rv - wagesPayable) },
        { val: this.formatPrice(item.pv - wagesPayable) },
        ])
      })

      this.tableData = arr

    },
    async getMonthSalaryChart() {
      const { data: res } = await getMonthSalary();
      let xAxisData = []
      let legendData = { show: true, data: ['基本工资', '绩效津贴', '加班工资', '福利津贴', '奖惩金额', '保险金额', '工服金额', '工作计划', '培训费用', '招聘费用', '计划值', '基数值'] }
      let series = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      res.dataVal.forEach((item, index) => {

        let type = { type: 'line' }
        if (index < 10) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }
        let ser = {
          name: legendData.data[index],
          ...type,
          data: item,
        }
        if (index == 0) {
          ser.label = {
            show: true,
            position: 'inside',
            formatter: '{c}'
          }
        }
        series.push(ser)
        // series.push(
        //   {
        //     name: legendData.data[index],
        //     ...type,
        //     data: item,
        //   },
        // )
      })
      this.$refs.salaryChart.initChart(legendData, xAxisData, series)
      this.load.close();
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
    toProjectDetails(key) {
      console.log(key)
      this.$router.push("/CldPayDetails/realTime/projectDetails/" + key);
    },
  }
}
</script>
<style lang="scss" scoped>
.salary {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .salary_top {
    height: 35vh;
    display: flex;
    flex-direction: column;

  }

  .salary_bottom {
    height: 50vh;
    display: flex;
    flex-direction: column;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>